<script setup>
import {
  ref,
  reactive,
  onActivated,
} from "vue";
import TopBar from "@/components/Topbar/index.vue";
import { getDistInfo } from "@/api/Other";
import { getAllCommodityExtraAttributes } from "@/api/ShopDatabase/goodsSetting.js";
import { useRoute } from "vue-router";
import TabelBrand from "@/components/TableComponents/Brand.vue";
import {
  selectCourseDetail
} from "@/api/EngageManagement/cureManagement.js";
import { cureList } from "@/utils/constClass";
const backValue = ref("CureManagementIndex");
const tabName = ref("疗程详情");
const route = useRoute();
const uuid = computed(() => {
  return route.query.id;
});
const suitList = ref([]);
const form = reactive({
  code: "",
  courseName: "",
  mnemonicCode: "",
  businessBrandId: "",
  pictureList: [],
  times: "",
  validity: "",
  diagnosisList: [],
  salesState: 1,
  retailPrice: "",
  costPrice: "",
});
const projectData = ref([]);
const courseAttributesList = ref([]);
const loading = ref(false);
const brandList = ref([])
onActivated(async () => {
  loading.value = true;
  const brandRes = await getDistInfo({permissionType:3});
  brandList.value = brandRes[0].groupData.map(
    (v) => ({
      label: v.permissionName,
      value: v.id,
    })
  );
  const ress = await getAllCommodityExtraAttributes();
  courseAttributesList.value = ress.courseAttributesList
    .filter((v) => !v.disabled)
    .map((v) => ({
      ...v,
      extraAttributesValue: "",
      optionContent: v.optionContent
        .split(",")
        .map((el) => ({ value: el, label: el })),
    }));

  const res = await selectCourseDetail(uuid.value);
  form.code = res.code;
  form.courseName = res.courseName;
  form.mnemonicCode = res.mnemonicCode;
  form.businessBrandId = res.businessBrandId?.split(',');
  form.pictureList = res.pictureList.map((v) => v.url);
  form.times = res.times;
  form.validity = res.validity;
  form.diagnosisList = res.diagnosisList;
  form.salesState = res.salesState;
  form.retailPrice = res.retailPrice;
  form.costPrice = res.costPrice;
  form.minSellingPrice = res.minSellingPrice; //最低售价
  suitList.value = res.diagnosisList.filter(v=>v.diagnosisCategory);
  const project = res.projectList.map((v) => ({
    ...v,
    id: v.baseId,
    sourceType: v.sourceType,
    times: void 0,
    unitPrice: v.unitPrice,
    valueAmount: void 0,
    retailPrice: v.retailPrice,
    retailAmount: void 0,
    projectName: v.commodityName,
    firstPicture: v.commodityPicture,
    code: v.commodityCode,
  }));
  const product = res.productList.map((v) => ({
    ...v,
    id: v.baseId,
    sourceType: v.sourceType,
    times: Number(v.times),
    unitPrice: v.unitPrice,
    valueAmount: v.valueAmount,
    retailPrice: v.retailPrice,
    retailAmount: v.retailAmount,
    productName: v.commodityName,
    firstPicture: v.commodityPicture,
    code: v.commodityCode,
    unit: "产品",
  }));

  projectData.value = [...product, ...project];
  courseAttributesList.value.forEach((e) => {
    res.attributeList.forEach((el) => {
      if (el.extraAttributesId == e.id) {
        e.extraAttributesValue = el.extraAttributesValue;
      }
    });
  });
  loading.value = false;
});
</script>
<template>
  <div class="page-contain" v-loading="loading">
    <TopBar :backValue="backValue" :tabName="tabName"></TopBar>
    <div class="info-contain">
      <div class="info-lis">
        <el-form :model="form" label-width="96px">
          <div class="lis-head">
            <div class="icon-view">
              <div class="icon-view-on"></div>
            </div>
            <span class="label-name">基础属性</span>
          </div>
          <div class="lis-item">
            <div class="lis-i">
              <el-form-item label="疗程编号：">
                {{ form.code }}
              </el-form-item>
            </div>
            <div class="lis-i">
              <el-form-item label="疗程名称：">
                {{ form.courseName }}
              </el-form-item>
            </div>
            <div class="lis-i">
              <el-form-item label="助记码：">
                {{ form.mnemonicCode }}
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="经营品牌：" v-if="form.businessBrandId?.length">
                <TabelBrand
                  :key="item"
                  :id="item"
                  :origin="form.businessBrandId"
                  :list="brandList"
                  :index="index"
                  v-for="(item,index) in form.businessBrandId"
                ></TabelBrand>
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="疗程图片：" prop="needValue">
                <div
                  style="
                    width: 100%;
                    position: relative;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                  "
                >
                  <el-image
                    :src="item"
                    :zoom-rate="1.2"
                    :preview-src-list="[form.pictureList]"
                    :initial-index="4"
                    preview-teleported
                    style="width: 160px; height: 160px; margin-right: 24px"
                    v-for="(item, index) in form.pictureList"
                    :key="index"
                  />
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="疗程内容：">
                <div style="width: 100%; margin-top: 8px">
                  <el-table :data="projectData" style="width: 100%" stripe>
                    <el-table-column label="名称">
                      <template #="{ row }">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="row.projectName || row.productName"
                          placement="top"
                      >
                          <div class="content-view">
                            {{ row.projectName || row.productName }} 
                          </div>
                      </el-tooltip>
                        <!-- {{ row.projectName || row.productName }} -->
                      </template>
                    </el-table-column>
                    <el-table-column label="类型">
                      <template #="{ row }">
                        {{ row["unit"] ? "产品" : "项目" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="次数/数量"
                      min-width="100"
                    >
                      <template #="{ row }">
                        {{ row.times || "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="unitPrice" label="单价">
                    </el-table-column>
                    <el-table-column label="价值金额">
                      <template #="{ row }">
                        <span v-if="row['unit']">{{
                          row.valueAmount || 0
                        }}</span>
                        <span v-else>-</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="零售价">
                      <template #="{ row }">
                        {{ row.retailPrice || "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column label="零售金额">
                      <template #="{ row }">
                        <span v-if="row['unit']">
                          {{ row.retailAmounts || row.retailAmount || 0 }}
                        </span>
                        <span v-else>-</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="疗程次数：">
                <span
                  style="
                    line-height: 14px;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 400;
                  "
                  >{{ form.times }}次</span
                >
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="疗程有效期：">
                <span
                  style="
                    line-height: 14px;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 400;
                  "
                  >{{ form.validity }} 天有效</span
                >
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%;">
              <el-form-item
                label="适用诊断："
                class="flex flex-warp"
                style="margin-bottom: 0"
              >
                <div
                  class="suitBox"
                  v-for="(item, index) in suitList"
                  :key="index"
                >
                   {{ item.diagnosisCategory }} : {{ item.diagnosisValue }}
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i" style="width: 100%">
              <el-form-item label="销售状态：">
                {{ cureList.find((v) => v.value == form.salesState)?.label }}
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i">
              <el-form-item label="零售价：">
                {{ form.retailPrice  }}
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i">
              <el-form-item label="成本价：">
                {{ form.costPrice || '-' }}
              </el-form-item>
            </div>
          </div>
          <div class="lis-item">
            <div class="lis-i">
              <el-form-item label="最低售价：">
                {{ form.minSellingPrice || '-' }}
              </el-form-item>
            </div>
          </div>
          <div class="lis-head">
            <div class="icon-view">
              <div class="icon-view-on"></div>
            </div>
            <span class="label-name">自定义属性</span>
          </div>
          <div class="lis-item" style="flex-wrap: wrap;">
            <div
              class="lis-ii"
              v-for="(item, index) in courseAttributesList"
              :key="index"
            >
              <el-form-item label-width="auto" :label="item.fieldName + '：'">
                <div>{{ item.extraAttributesValue || '-' }}</div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
:deep(.el-table__inner-wrapper::before) {
  display: none;
}
:deep(.el-table th.el-table__cell) {
  background: #ebebeb;
}
:deep(.el-dialog__body) {
  padding: 0 4px;
}
:deep(.el-table__header) {
  tr {
    th {
      &:last-child {
        .cell {
          border-right: 0px;
        }
      }
    }
  }
}
.page-contain {
  width: 100%;
  height: 100%;
  :deep(.el-table th > .cell) {
    border-right: 0;
  }
  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-left: 1px solid #3480ff;
  }
  .info-contain {
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    padding: 16px 24px;
    .btn-opea {
      width: 100%;
      height: 32px;
    }
    .info-lis {
      width: 100%;
      height: calc(100%);
      box-sizing: border-box;
      // padding-top:24px;
      overflow: auto;
      .lis-head {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 16px;
        .icon-view {
          margin-right: 8px;
          position: relative;
          width: 14px;
          height: 14px;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #10e7f9;
          }
          .icon-view-on {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background-color: #3480ff; /* 背景色 */
          }
        }
        .label-name {
          color: #000000;
          font-weight: bold;
          font-size: 14px;
          margin-right: 8px;
        }
        img {
          width: 14px;
          height: 14px;
          cursor: pointer;
        }
      }
    }
    .lis-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .lis-i {
        width: calc(100% / 3);
        margin-bottom:10px;
        :deep(.el-form-item__label){
          min-width: 96px;
        }
      }
      .lis-ii{
        width: calc(100% / 3);
        :deep(.el-form-item__label){
          min-width: 110px;
        }
      }
    }
  }
  :deep(.el-table__row) {
    .el-input .el-input__wrapper {
      background: rgba(0, 0, 0, 0);
    }
  }
}
.input-line {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0px;
  }
  img {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin-left: 8px;
  }
}
.project-info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .img {
    width: 48px;
    height: 48px;
  }
  .name-info {
    width: calc(100% - 56px);
    box-sizing: border-box;
    padding-left: 8px;
    .p1 {
      width: 100%;
      color: #222222;
      font-weight: bold;
      line-height: 14px;
      font-size: 14px;
      height: 14px;
    }
    .p2 {
      width: 100%;
      margin-top: 8px;
      color: #666666;
      line-height: 14px;
      font-size: 14px;
      height: 14px;
    }
  }
}
.suitBox {
  color: #000000;
  font-size: 14px;
  line-height: normal;
  font-weight: 400;
  padding: 8px 12px;
  background: #f3f3f3;
  border-radius: 4px;
  margin-right: 16px;
  margin-bottom: 16px;
}

.content-view{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
}
</style>
